import { FC } from "react";
import { Card } from "@arco-design/web-react";
import { css } from "@emotion/css";
import { useQuery } from "react-query";
import { useAPI } from "../../hooks/useAPI.ts";
import { FinalRiskType } from "../../api/types/elder-risk.ts";

const valueClass = css`
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
`;
const fieldClass = css`
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  white-space: nowrap;
`;

export const RiskStatisticCard: FC = () => {
  const api = useAPI();
  // @ts-ignore
  const { data, isLoading } = useQuery(["risk-statistic"], async () => {
    const response = await api.getRiskStatistic();
    const data = response.data.data;
    const total = data?.length ?? "-";
    const high =
      data?.filter(
        (row: { actionStatus: FinalRiskType }) =>
          row.actionStatus === FinalRiskType.High
      ).length ?? "-";
    const mid =
      data?.filter(
        (row: { actionStatus: FinalRiskType }) =>
          row.actionStatus === FinalRiskType.RiskMid
      ).length ?? "-";
    return { total, high, mid, isLoading };
  });

  return (
    <Card
      className={css`
        width: 100%;
        min-height: 130px;
        border-radius: 10px;
        border: 1px solid rgb(var(--primary-6));
        background-color: #fff8ed;

        .arco-card-body {
          width: 100%;
          height: 100%;
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      `}
      loading={isLoading}
    >
      <div
        className={css`
          padding: 12px 20px;
          width: 100%;
          height: 100%;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 25px;
        `}
      >
        <div
          className={css`
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            padding-right: 25px;

            &::before {
              content: " ";
              position: absolute;
              top: 50%;
              right: 0;
              transform: translateY(-50%);
              width: 1px;
              height: 34px;
              background-color: var(--color-border-3);
            }
          `}
        >
          <p className={valueClass}>{data?.total ?? "-"}</p>
          <p className={fieldClass}>长辈总数</p>
        </div>
        <div
          className={css`
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          `}
        >
          <p
            className={valueClass}
            style={{
              color: "rgb(var(--danger-6))",
            }}
          >
            {data?.high ?? "-"}
          </p>
          <p className={fieldClass}>高风险人数</p>
        </div>
        <div
          className={css`
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          `}
        >
          <p
            className={valueClass}
            style={{
              color: "rgb(var(--primary-6))",
            }}
          >
            {data?.mid ?? "-"}
          </p>
          <p className={fieldClass}>中风险人数</p>
        </div>
      </div>
    </Card>
  );
};
